<template>
    <div class="news">
        <img src="../type-list/img/back.png"
             alt=""
             @click="$router.replace('/')" />
        <el-table :data="tableData3"
                  border
                  v-loading='loading'
                  style="width: 100%;background: none;">
            <el-table-column label="序号"
                             type='index'
                             :index='indexMethod'
                             align='center'
                             width='60'>
            </el-table-column>
            <el-table-column label="行业"
                             prop="labelName"
                             align='center'>
            </el-table-column>
            <el-table-column label="审核状态"
                             prop="status"
                             align='center'>
            </el-table-column>
            <el-table-column align="center"
                             label="操作">
                <template slot-scope="scope">
                    <a href="#"
                       @click="goDetail(scope.row)"
                       style="color:#000000">详情</a>
                </template>
            </el-table-column>
        </el-table>
        <div style="display: flex;align-items: center;justify-content: center;">
            共{{total}}条
            <el-pagination small
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :pager-count="5"
                           :page-size='limit'
                           layout="prev,pager,next,sizes"
                           :total="total"></el-pagination>

        </div>
        <el-dialog title=""
                   :visible.sync="flag"
                   width="100%">
            <div v-if='imgData'
                 style="position: relative;">
                <img :src="imgData.url"
                     alt=""
                     style="width:100%;"
                     class='testImg' />
                <div class="newADD"
                     v-for="(item,idx) in varCoordInfo"
                     :style="{left:item.x*scaling+'px',top: item.y*scaling+'px',width:item.w*scaling+'px',height:item.h*scaling+'px',position:'absolute',border:'1px solid #fff'}"
                     v-bind:key="idx">
                    <div class="left">{{item.id+1}}</div>
                </div>
            </div>
            <p style="color: red;"
               v-if="one.status='审核未通过'">
                原因:{{one.handleMsg}}
            </p>
            <el-button @click="flag = false">关闭</el-button>
        </el-dialog>

    </div>
</template>
<script>
export default {
    name: "news",
    data () {
        return {
            formInline: {
                name: '',
                phone: '',
                idCardNumber: '',

            },
            imgData: {},
            varCoordInfo: [],
            flag: false,
            currentPage: 1,
            total: 0,
            openid: '',
            scaling: 1,
            one: {},
            limit: 10,
            loading: false,
            tableData3: [],
        };
    },
    methods: {
        goRegister () {
            var url1 = encodeURIComponent(window.location.href.split('?')[0] + '#/register')
            window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf873bd7fdb2bd0be&redirect_uri=' + url1 + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
        },
        getOpenId () {
            // 登录
            var that = this
            var code = window.location.href.split('&')[0].split('=')[1]
            //               url: 'http://wx-api.1safety.cc/api/auth/login',
            $.ajax({
                url: `http://m.api.1safety.cc/api/auth/login?code=${code}&isgame=a`,
                type: 'get',
                dataType: 'json',
                async: true,
                timeout: 30000,
                success: function (data) {
                    if (data != null && data.code != null && data.code == 200) {
                        that.openid = data.data.wxOpenid
                        that.getWork()

                    } else {
                        that.$message.warning(data.msg)
                    }
                }
            })
        },
        goDetail (obj) {
            this.imgData = ''
            this.flag = true
            this.one = obj
            this.imgData = JSON.parse(obj.varFileInfo)
            this.scaling = (document.body.clientWidth - 40) / JSON.parse(obj.varFileInfo).width
            this.varCoordInfo = JSON.parse(obj.varCoordInfo).coordInfos
        },
        indexMethod (index) {
            return this.limit * (this.currentPage - 1) + index + 1
        },
        handleSizeChange (val) {
            this.limit = val
            this.getWork()
        },
        handleCurrentChange (val) {
            this.currentPage = val
            this.getWork()
        },
        getWork () {
            let that = this
            let reqUrl = localStorage.getItem('ApiUrl') + 'threat/list?page=' + this.currentPage + '&limit=' + this.limit + '&createUserId=' + this.openid
            this.$ajax.get(reqUrl, {
                headers: {
                    'Content-Type': 'application/json;charset=UTF-8'
                }
            })
                .then(function (res) {
                    var obj = res.data
                    if (obj.code == 0) {
                        that.tableData3 = obj.page.list
                        that.total = obj.page.totalCount
                        that.tableData3.map(function (item) {
                            item.imgUrl = JSON.parse(item.varFileInfo).fileName
                            var state = item.status
                            switch (state) {
                                case '1':
                                    item.status = '处理中';
                                    break;
                                case '2':
                                    item.status = '审核通过';
                                    break;
                                default:
                                    item.status = '审核未通过';
                                    break;
                            }
                        })
                    }
                })
                .catch(function (res) {
                    console.log(res);
                })
        }
    },
    mounted () {
        this.getOpenId()
    }
}
</script>
<style type="text/css" lang="less">
.news {
    width: 100%;
    height: 100%;
    background: url(./img/bg.png) no-repeat;
    background-size: 100% 100%;
    a {
        color: #000000;
    }
    .el-input {
        margin: 0;
    }
    .newADD {
        position: absolute;
        border: 1px solid #000;
        img {
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .left {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            padding: 0;
            text-align: center;
            line-height: 20px;
            float: left;
            margin: -10px;
        }
    }
}
.news .el-dialog__header {
    position: relative;
}
.news .el-dialog__headerbtn {
    top: 50%;
    transform: translateY(-50%);
}
.news .el-dialog {
    margin-top: 0 !important;
    margin-bottom: 0;
    overflow: scroll;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.news .el-dialog__wrapper {
    position: absolute;
    bottom: 0;
}
</style>